<template>
  <a-modal
    class="anchor-form"
    :visible="visible"
    :title="title"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    :closable="false"
    :confirmLoading="confirmLoading"
    width="700px"
    @cancel="closeModal(false)"
    @ok="handleSubmit">
    <a-form-model
      class="group-bargaining-form"
      ref="ruleForm"
      :model="formData"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 19 }">
      <a-form-model-item prop="appId">
        <template slot="label">
          <span style="color: red">*</span>直播平台
        </template>
        <a-radio-group
          :disabled="handle != 'add'"
          v-model="formData.appId">
          <a-radio v-for="(item, index) in liveAppIdList" :key="index" :value="item.value" :disabled="(userInfo.shopRoleCode != 'role:store:main') && (item.value == '100000054')">{{ item.label }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="主播昵称" prop="anchorName">
        <a-input allow-clear
          style="width:325px"
          v-model="formData.anchorName"
          :disabled="checkDisabled('anchorName')"
          :maxLength="15"
          placeholder="请输入主播昵称，限2-15字" />
      </a-form-model-item>
      <a-form-model-item label="主播微信账号" prop="anchorWechat">
        <a-input allow-clear
          style="width:325px"
          v-model="formData.anchorWechat"
          :disabled="checkDisabled('anchorWechat')"
          :maxLength="24"
          placeholder="请输入主播微信账号，限3-24字" />
      </a-form-model-item>
      <a-form-model-item label="上传头像" prop="headPicture">
        <div class="upload-box">
          <upload-image class="img" :disabled="checkDisabled('headPicture')" v-model="formData.headPicture"></upload-image>
          <div class="upload-txt">
            建议尺寸：120像素 * 120像素<br>
            图片大小不得超过500kb
          </div>
        </div>
      </a-form-model-item>
      <!-- <a-form-model-item label="扫码实名认证">
        <div class="img-box"><i class="anchor-img"></i></div>
      </a-form-model-item>
      <a-form-model-item label="已认证" prop="certified">
        <a-checkbox :checked="isCheck" disabled=""></a-checkbox>
      </a-form-model-item> -->
    </a-form-model>
    <template slot="footer">
      <a-button key="back" @click="closeModal(false)"> 取消 </a-button>
      <a-button :loading="confirmLoading" v-if="handle != 'view' && record.status != 2" key="submit" type="primary" @click="handleSubmit"> 提交 </a-button>
    </template>
  </a-modal>
</template>

<script>
import { mapGetters } from "vuex";
import deepCopy from '@/utils/deepCopy'
import { createOptionsByDict } from '@/utils/dict'
const formData={
  appId: undefined, // 平台编号
  id: undefined, // 主播id
  anchorName: '', // 主播昵称
  anchorWechat: '', // 主播微信号
  headPicture: '', // 主播头像
  status: undefined // 主播状态
}
export default {
  name: "anchorForm",
  props: {
    handle: { // 操作类型
      type: String,
      default: 'edit'
    },
    record: { // 选中行数据
      type: Object,
      default () {
        return {}
      }
    },
    appId: { // 平台编号
      type: String,
      default: '100000054'
    },
    visible: { // 是否显示弹窗
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      liveAppIdList: createOptionsByDict('LIVE_APPID'), // 直播平台
      confirmLoading: false, // 提交等待
      formData,
      disabled: false, // 表单禁用状态
      rules:{ // 表单验证规则
        anchorName: [
          { required: true, message: '请输入主播昵称', trigger: 'blur' },
          { min: 2, max: 15, message: '主播昵称长度在2-15位', trigger: 'blur' },
        ],
        anchorWechat: [
          { required: true, message: '请输入主播微信账号', trigger: 'blur' },
          { min: 3, max: 24, message: '主播微信账号长度在3-24位', trigger: 'blur' },
        ],
        headPicture: [
          { required: true, message: '请上传头像', trigger: 'blur'},
        ],
        certified: [
          { required: true, message: '请扫码实名认证', trigger: 'change'},
        ],
      }
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
    title() { // 弹窗标题
      let res = ''
      switch (this.handle) {
        case 'add':
          res = '新增主播'
          break;
        case 'edit':
          res = '编辑主播信息'
          break;
        case 'view':
          res = '查看主播信息'
          break;
      }
      return res
    },
  },
  watch: {
    // 监听弹窗显示，回显数据
    visible(value) {
      this.description = ''
      if (value && this.record.id) {
        this.$nextTick(()=> {
          this.formData = {
            appId: this.appId, // 平台编号
            id: this.record.id,
            anchorName: this.record.anchorName,
            anchorWechat: this.record.anchorWechat,
            headPicture: this.record.headPicture,
            status: this.record.status
          }
        })
      } else {
        this.resetData()
      }
    }
  },
  methods: {
    // 重置
    resetData(){
      this.formData=deepCopy(formData);
      this.formData.appId = this.appId
    },
    // 获取主播信息
    async getAnchorInfo(id){
      let res = await this.$get('',
        {id},
        { baseURL: `${location.origin}/goldenhome/gh/live/admin` });
      if(res && res.returnCode=='1000'){
        // console.log(res.dataInfo)
      }
    },
    // 表单禁用状态校验
    checkDisabled(key) {
      let res = false
      if(this.record.status == 2 || this.handle == 'view') {
        res = true
      } else if(this.record.status == 1 && key == 'anchorWechat') {
        res = true
      }
      return res
    },
    // 确定提交
    handleSubmit() {
      let url = ''
      switch (this.handle) {
        case 'add':
          url = '/user/add'
          break;
        case 'edit':
          url = '/user/update'
          break;
      }
      let _this = this
      this.confirmLoading = true;
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          _this.$post(url,
              this.formData,
              { baseURL: `${location.origin}/goldenhome/gh/live/admin` }).then((res) => {
            if (res && res.returnCode == 1000) {
              _this.confirmLoading = false;
              _this.$message.success('操作成功');
              _this.closeModal(true);
            }
          });
        } else {
          this.confirmLoading = false;
          return false;
        }
      });
    },
    // 取消
    closeModal(bool) {
      this.$emit('cancel', bool)
    }
  }
}
</script>

<style scoped lang="less">
  .anchor-form{
    .upload-box{
      display: flex;
      .img{
        margin-right: 12px;
      }
    }
    .anchor-img{
      display: block;
      width: 150px;
      height: 150px;
      background-image: url("");
      background-repeat: no-repeat;
      margin-left: 12px;
    }
  }
</style>
